<template>
  <!--内容彩票开奖信息-->
  <div :class="'cp-body-lottery-num bg-'+classType" :style="{'height':bodyHeight+'rem'}">
    <div :class="'cp-lottery-left wd-'+classType">
      <span @click.stop="showTable" >
        10000期开奖号码&nbsp;&nbsp;<i class="fa fa-angle-down"></i>
      </span>

        <div v-if="classType==1" class="lottery-num">
            <em v-for="n in 5">{{n}}</em>
        </div>
        <div v-if="classType==2" class="lottery-num-k3">
            <em v-for="n in 3" :class="'sz sz-mi sz-'+n"></em>
        </div>
        <div v-if="classType==3" class="lottery-num-lhc">
            <div v-for="n in 6">
            <em class="red">{{n}} </em>
              猴
            </div> &nbsp;+
          <div>
            <em class="blue">1</em>
            马
          </div>
        </div>
    </div>
    <div  :class="'cp-lottery-right wd-'+classType">
          <div class="time-title">
            100001期截止日期
          </div>
        <yd-countdown :callback="showInfo" :time="15" doneText="已截止" timetype="second" format="{%h}:{%m}:{%s}"></yd-countdown>
    </div>
    <table v-if="classType==1" :style="{'top':bodyHeight+0.02+'rem'}" v-show="showHistoryNum" :class="'cp-lottery-his tb-'+classType">
      <tr>
        <th>期号</th>
        <th>开奖号码</th>
        <th>开奖时间</th>
      </tr>
      <tr v-for="td in 10">
        <td>{{10000+td}}</td>
        <td class="l-num"><span v-for="nu in 5" >{{nu}}</span> </td>
        <td>10.00.00</td>
      </tr>
    </table>
    <table v-if="classType==2" :style="{'top':bodyHeight+'rem'}" v-show="showHistoryNum" :class="'cp-lottery-his tb-'+classType">
      <tr>
        <th>期号</th>
        <th>开奖号码</th>
        <th>开奖时间</th>
      </tr>
      <tr v-for="td in 10">
        <td>{{10000+td}}</td>
        <td class="l-num"><span v-for="nu in 3" class="sz sz-nm" :class="'sz-'+(nu+1)"></span> </td>
        <td>10.00.00</td>
      </tr>
    </table>
    <table v-if="classType==3" :style="{'top':bodyHeight+0.02+'rem'}"  v-show="showHistoryNum" :class="'cp-lottery-his tb-'+classType">
      <tr>
        <th>期号</th>
        <th>开奖号码</th>
        <th>开奖时间</th>
      </tr>
      <tr v-for="td in 6">
        <td>{{10000+td}}</td>
        <td class="l-num">
          <div v-for="b in 6">
            <em class="num-ball green" > {{b}}</em>
            马
          </div>+
          <div>
            <em class="green">16</em>
            兔
          </div>
        </td>
        <td>10.00.00</td>
      </tr>
    </table>

    <yd-popup v-model="showMsg" position="center" width="70%" >
      <div class="pop-title">
        温馨提示
      </div>
      <div class="pop-content">
        <p>
        10001期彩票中奖信息
        </p>
        <p>
        中奖号码1000000
        </p>
      </div>
      <div class="btn-close" @click="showMsg=false">
        <span type="1">确定</span>
      </div>
    </yd-popup>
  </div>

</template>
<script>

  export default {
    name:"cp-body-lottery-num",
    data(){
      return {
        showHistoryNum:false,
        showMsg:false,
        bodyHeight:1.2,
      }
    },
    props:{
      classType:{
        type:Number,
        default:""
      }
    },
    methods:{
      showTable(){
        this.showHistoryNum = !this.showHistoryNum;
      },
      showInfo(){
        this.showMsg= true;
      }
    },
    computed:{

    },
    mounted:function () {
      if(this.classType===3){
        return this.bodyHeight = 1.4;
      }
    }
  }

</script>
<style scoped>
  @import "../../css/sz.css";
  .pop-title{
    border-top-left-radius: 1em;
    font-size: 1.45em;
    color: #333;
    line-height: 2.2em;
    height: 2.2em;
    border-bottom: 1px solid #EBEBEB;
  }
  .pop-content{
    color: #000;
    font-size: 1.4em;
    padding-top: 1.1em;
    padding-bottom: 1.1em;
  }
  .btn-close{
    width: 100%;
    border: none;
    color: #007bf4;
    position: relative;
    height: 2.2em;
    line-height: 2.2em;
    font-size: 1.78em;
    border-top: 1px solid #EBEBEB;
  }
  .cp-lottery-his{
    position: absolute;
    left: 0;
    width: 100%;
    color: #666;
    overflow: hidden;
    box-shadow: 0 10px 10px rgba(41,41,41,.08);
    background: #e1d9bb;
    z-index: 4;
  }
  .cp-lottery-his th{
    font-size: 1.1em;
    text-align: center;
  }
  .tb-1 tr{
    height: 1.8em;
    font-size: 1.3em;
  }
  .tb-1 .l-num{
    color: #dc3b40;
  }
  .l-num span {
    margin-left: 1em;
  }
  .tb-2 {
    color: #caebda;
    background-color: #22563f;
    border-top: 1px solid #426d5a;
  }
  .tb-2 td{
    font-size: 1.2em;
  }
  .tb-2 th{
    font-size: 1.4em;
  }

  .tb-3 .l-num{
    display: inline-flex;
  }
  .tb-3 .l-num em {
    height: 1.6em;
    width: 1.6em;
    display: table-cell;
    line-height: 1.6em;
    box-shadow: 0 2px 1px #bbb59c;
    border-radius: 50%;
    color: #fff;
    font-size: 1em;
  }
  .cp-lottery-left.wd-3{
    width: 75%;
  }
  .cp-lottery-right.wd-3{
    /*width: auto;*/
  }

  .lottery-num-lhc{
    display: inline-flex;
  }

  .lottery-num-lhc em{
    height: 1.5em;
    width: 1.5em;
    display: table-cell;
    line-height: 1.5em;
    box-shadow: 0 2px 1px #bbb59c;
    border-radius: 50%;
    color: #fff;
    font-size: 1.2em;
  }
  .lottery-num-lhc div{
    margin-left: .3em;

  }
  .red{
    background: linear-gradient(0deg,#f87b7e 0,#dc3b40 75%);
    background: -webkit-linear-gradient(top,#f87b7e,#dc3b40 75%);
  }
.blue{
  background: linear-gradient(0deg,#6ebefa 0,#218ddd 75%);
  background: -webkit-linear-gradient(top,#6ebefa,#218ddd 75%);
}
.green{
  background: linear-gradient(0deg,#69d893 0,#38b366 75%);
  background: -webkit-linear-gradient(top,#69d893,#38b366 75%);
}
  .time-title{
    font-size: 1.4em;
  }
  .cp-lottery-right span{
    font-size: 1.9em;
    /*color: #333;*/
  }
  .cp-lottery-left span{
    font-size: 1.3em;
    /*color: #333;*/
  }
  .cp-lottery-left,.cp-lottery-right{
    width: 50%;
  }
  .lottery-num em{
    width: 1.4em;
    height: 1.4em;
    line-height: 1.4em;
    display: inline-block;
    margin: 0.2em;
    border-radius: 50%;
    font-size: 1.4em;
    background: #dc3b40;
    background: linear-gradient(0deg,#f86469 0,#bf1f24 75%);
    background: -webkit-linear-gradient(top,#f86469,#bf1f24 75%);
    box-shadow: 0 3px 1px #bbb59c;
    /*color: #fff;*/
  }
  .cp-body-lottery-num{
    width: 100%;
    background-color: #e6ddc0;
    position: fixed;
    top: 1.1rem;
    z-index: 4;
    display: inline-flex;
    text-align: center;
    padding: 0.3em;
  }
  .bg-2{
    background-color: #22563f;
    color: #caebda;
  }
  .bg-3{
    color: #666;
  }
  .bg-3 .cp-lottery-left .lottery-num{
    color: #fff;
  }
  .bg-1{
    color: #666;
  }
  .bg-1 .cp-lottery-left .lottery-num{
    color: #fff;
  }
</style>
